<template>
  <div class="h-6" />
  <el-row>
    <el-col :span='4'>
      <div class="easy-cvr-style">
        EasyCVR <span class="version">{{ data.version }}</span>
      </div>
    </el-col>
    <el-col :span='20'>

      <el-menu :popper-offset="2" router :default-active="router.currentRoute.value.path" class="el-menu-demo"
        mode="horizontal" :ellipsis="false" background-color="#2D3A4B" text-color="#FFFFFF" active-text-color="#4E7DF5"
        @select="handleSelect">
        <template v-for="menu in data.menuData" :key="menu.menuOrder">
          <el-menu-item v-if="!menu.children.length" :index="menu.url">
            {{ menu.menuName }}
          </el-menu-item>
          <el-sub-menu v-else :index="menu.menuId">
            <template #title>{{ menu.menuName }}</template>
            <template v-for="child in menu.children">
              <el-menu-item :index="menu.url + child.url">
                {{ child.menuName }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>

        <!-- 静态菜单 (必须有的菜单) -->
        <el-sub-menu index="management3">
          <template #title>用户</template>
          <el-menu-item @click="quit">注销登录</el-menu-item>
          <el-menu-item index="/parentRouter/role">修改密码</el-menu-item>
        </el-sub-menu>
      </el-menu>

    </el-col>
  </el-row>


  <el-main>
    <RouterView />
  </el-main>
</template>

<script setup>
import router from "@/router";
import { onMounted, reactive, ref } from "vue";
import { Location, Reading } from "@element-plus/icons-vue";
import { useUserInfoStore } from '@/stores/user';
import { getRouters } from "@/api/menu";

const data = reactive({
  version: '© v1.0.1',
  menuData: {},             // 菜单数据

})

const quit = () => {
  router.replace('/login')
}

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

const getRouterList = async () => {
  const userInfoStore = useUserInfoStore()
  const response =  await getRouters(userInfoStore.user.id)
  data.menuData = response.data
}

onMounted(() => {
  getRouterList()
})

</script>

<style scoped>
.easy-cvr-style {
  display: flex;
  box-sizing: border-box;
  height: 60px;
  align-items: center;
  background-color: #2d3a4b;
  color: #fff;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
  font-size: 24px;
}

.version {
  margin-left: 10px;
  font-size: 16px;
  color: #b0c4de;
}

.el-menu-demo {
  background-color: #2d3a4b;
  border-bottom: 1px solid #434a54;
  width: 100%;
}

.el-menu-item,
.el-sub-menu__title {
  color: #b0c4de;
}

/* .el-menu--horizontal> :nth-of-type(5).el-sub-menu {
  margin-right: auto;
} */

/* 始终选择 ---> 倒数第二个元素 */
.el-menu--horizontal > .el-sub-menu:nth-last-child(2) {
  margin-right: auto;
}   
</style>